<template>
  <a-form-model :model="data" :rules="conf.rules" :label-align="conf.labelAlign" :layout="conf.layout" :label-col="conf.labelCol" :wrapper-col="conf.wrapperCol">
    <a-col v-for="item in conf.items" :key="item.key" :span="item.span">
      <form-parser :item="item" :data="data"></form-parser>
    </a-col>
    <a-col :span="24">
      <a-button @click="btnClick">点我</a-button>
    </a-col>
  </a-form-model>
</template>

<script>
  export default {
    name: 'detail',
    components: {},
    data() {
      return {
        data: {},
        conf: {
          rules: {},
          labelAlign: 'right',
          layout: 'horizontal',
          labelCol: { span: 8 },
          wrapperCol: { span: 16 },
          items: [
            {
              key: 'form-table',
              tag: 'form-table',
              type: 'custom',
              span: 24,
              conf: {},
            },
            {
              key: 'p-tabs',
              tag: 'p-tabs',
              type: 'custom',
              span: 24,
              conf: {},
              subItems: [
                {
                  name: '基本信息',
                  children: [
                    { key: 'name', tag: 'a-input', span: 6, conf: { label: '名称', placeholder: '请输入流程名称', allowClear: true } },
                    { key: 'code', tag: 'a-input', span: 6, conf: { label: '编码', placeholder: '请输入流程编码' } },
                    { key: 'version', tag: 'a-input-number', span: 6, conf: { label: '版本' } },
                    { key: 'dataQueryApi', tag: 'a-input', span: 6, conf: { label: '业务数据查询接口', placeholder: '请输入业务数据查询接口', allowClear: true } },
                    { key: 'dataSaveApi', tag: 'a-input', span: 6, conf: { label: '业务数据保存接口', placeholder: '请输入业务数据保存接口', allowClear: true } },
                    {
                      key: 'type',
                      tag: 'a-select',
                      span: 6,
                      conf: {
                        label: '类型',
                        placeholder: '',
                        allowClear: true,
                        selectOption: [
                          { label: 'JAVA', value: 'JAVA' },
                          { label: 'PHP', value: 'PHP' },
                        ],
                      },
                    },
                  ],
                },
                {
                  name: '审批流程',
                  children: [
                    { key: 'name1', tag: 'a-input', span: 6, conf: { label: '名称', placeholder: '请输入流程名称', allowClear: true } },
                    { key: 'code1', tag: 'a-input', span: 6, conf: { label: '编码', placeholder: '请输入流程编码' } },
                    { key: 'version1', tag: 'a-input-number', span: 6, conf: { label: '版本', placeholder: '请输入版本' } },
                    { key: 'dataQueryApi1', tag: 'a-input', span: 6, conf: { label: '业务数据查询接口', placeholder: '请输入业务数据查询接口', allowClear: true } },
                    { key: 'dataSaveApi1', tag: 'a-input', span: 6, conf: { label: '业务数据保存接口', placeholder: '请输入业务数据保存接口', allowClear: true } },
                    {
                      key: 'type1',
                      tag: 'a-select',
                      span: 6,
                      conf: {
                        label: '类型',
                        placeholder: '请选择类型',
                        allowClear: true,
                        selectOption: [
                          { label: 'JAVA', value: 'JAVA' },
                          { label: 'PHP', value: 'PHP' },
                        ],
                      },
                    },
                  ],
                },
              ],
            },
            {
              key: 'p-collapse2',
              tag: 'p-collapse',
              type: 'custom',
              span: 24,
              conf: {},
              subItem: {
                name: '基本信息',
                children: [
                  { key: 'name', tag: 'a-input', span: 6, conf: { label: '名称', placeholder: '请输入流程名称', allowClear: true } },
                  { key: 'code', tag: 'a-input', span: 6, conf: { label: '编码', placeholder: '请输入流程编码' } },
                  { key: 'version', tag: 'a-input-number', span: 6, conf: { label: '版本' } },
                  { key: 'dataQueryApi', tag: 'a-input', span: 6, conf: { label: '业务数据查询接口', placeholder: '请输入业务数据查询接口', allowClear: true } },
                  { key: 'dataSaveApi', tag: 'a-input', span: 6, conf: { label: '业务数据保存接口', placeholder: '请输入业务数据保存接口', allowClear: true } },
                  {
                    key: 'type',
                    tag: 'a-select',
                    span: 6,
                    conf: {
                      label: '类型',
                      placeholder: '请选择类型',
                      allowClear: true,
                      selectOption: [
                        { label: 'JAVA', value: 'JAVA' },
                        { label: 'PHP', value: 'PHP' },
                      ],
                    },
                  },
                ],
              },
            },
            {
              key: 'blank-space',
              tag: 'blank-space',
              type: 'custom',
              span: 24,
              conf: {
                height: '20',
              },
            },
            {
              key: 'p-collapse3',
              tag: 'p-collapse',
              type: 'custom',
              span: 24,
              conf: {},
              subItem: {
                name: '基本信息',
                children: [
                  { key: 'name', tag: 'a-input', span: 6, conf: { label: '名称', placeholder: '请输入流程名称', allowClear: true } },
                  { key: 'code', tag: 'a-input', span: 6, conf: { label: '编码', placeholder: '请输入流程编码' } },
                  { key: 'version', tag: 'a-input-number', span: 6, conf: { label: '版本' } },
                  { key: 'dataQueryApi', tag: 'a-input', span: 6, conf: { label: '业务数据查询接口', placeholder: '请输入业务数据查询接口', allowClear: true } },
                  { key: 'dataSaveApi', tag: 'a-input', span: 6, conf: { label: '业务数据保存接口', placeholder: '请输入业务数据保存接口', allowClear: true } },
                  {
                    key: 'type',
                    tag: 'a-select',
                    span: 6,
                    conf: {
                      label: '类型',
                      placeholder: '请选择类型',
                      allowClear: true,
                      selectOption: [
                        { label: 'JAVA', value: 'JAVA' },
                        { label: 'PHP', value: 'PHP' },
                      ],
                    },
                  },
                ],
              },
            },
            {
              key: 'blank-space',
              tag: 'blank-space',
              type: 'custom',
              span: 24,
              conf: {
                height: '20',
              },
            },
          ],
        },
      };
    },
    methods: {
      btnClick() {
        console.log(this.data);
      },
    },
  };
</script>

<style scoped></style>
